<!doctype html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>
	<title>DOM操作</title>
</head>
<body>

<button id="test1">模拟before处理</button>
<button id="test2">模拟append处理</button>
<button id="test3">模拟prepend处理</button>

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>


<script type="text/javascript">

// $('.inner').append('<p>Test</p>')
// $('.inner').before('<p>慕课网</p>')
// $('.inner').prepend('<p>Test</p>');

$('#test1').click(function() {
	var inner = document.getElementsByClassName('inner')
	for (var i = 0; i < inner.length; i++) {
		var elem = inner[i]
		var div = document.createElement('div')
		div.innerHTML = '<p>before操作</p>'
		elem.parentNode.insertBefore(div, elem)
	}
})


$('#test2').click(function() {
	var inner = document.getElementsByClassName('inner')
	for (var i = 0; i < inner.length; i++) {
		var elem = inner[i]
		var div = document.createElement('div')
		div.innerHTML = '<p>append操作</p>'
		elem.appendChild(div)
	}
})


$('#test3').click(function() {
	var inner = document.getElementsByClassName('inner')
	for (var i = 0; i < inner.length; i++) {
		var elem = inner[i]
		var div = document.createElement('div')
		div.innerHTML = '<p>prepend操作</p>'
		elem.insertBefore(div, elem.firstChild);
	}
})


</script>

</body>
</html>
